<template>
	<view class="refund">
		<view class="wrapper">
			<view class="top d-flex">
				<u-image :src="data.image" width="190rpx" height="190rpx" radius="12rpx"></u-image>
				<view style="margin-left: 30rpx;">
					<view class="name">{{ data.name }}</view>
					<!-- <view class="date">{{ data.date }}</view> -->
					<view class="count">×{{ data.goods_price }}</view>
				</view>
			</view>
			
			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>
			
			<view class="flex-between">
				<view>
					退款金额<text style="color: #BEBEBE;">(实付金额)</text>
				</view>
				<price :value="data.goods_price" color="#FF4105"></price>	
			</view>
			
			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>
			
			<view>
				<view class="flex-between">
					<view class="">退回账户</view>
					<view class="flex-align">
						<u-icon name="weixin-fill" color="#00c800" size="58rpx"></u-icon>
						<view>微信账户</view>
					</view>
				</view>
				
				<view style="color: #888888; margin-top: 14rpx; font-size: 24rpx;">
					(<text style="color: #FF8F05;">1-3个工作日内</text>到账，若原路退回失败，款项会尝试退还至您美团 钱包的余额)
				</view>
			</view>
			
			<u-line margin="30rpx 0" color="#E5E5E5"></u-line>
			
			<view>退款原因</view>
			<u-textarea v-model="data.content" placeholder="填写原因" border="none" height="180"></u-textarea>
		</view>
		
		
		<view class="bottom-add-btn">
			<u-button text="提交" shape="circle" @click="Refund" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	const person = require("@/api/personal/index.js");
export default {
	data() {
		return {
			data: {
				name: '',
				date: '',
				price: '',
				count: '',
				image:'',
				id:'',
				content:'',
				goods_price:''
			},
		}
	},
	onLoad(options) {
		console.log(options)
		this.data.name = options.goods_name
		this.data.date = options.consumption_type
		this.data.price = options.amount_payable
		this.data.count = options.orderlength
		this.data.image = options.goods_image
		this.data.goods_price = options.goods_price
		this.id = options.id
		
	},
	methods: {
		// 获取我的待付款订单
		async Refund() {
			let that = this;
			let postData = {
				app_id: this.$https.weixinAppId,
				project_id: this.$https.projectId,
				order_id: this.id,
				reason: this.data.content,
				
			};
			let res = await person.Refund(postData);
			if (res.code == 1) {
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			} 
		},
		
	}
}
</script>

<style lang="scss" scoped>
.refund {
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	.wrapper {
		background-color: #fff;
		padding: 30rpx;
	}
	
	.top {
		.name {
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.date {
			margin-bottom: 30rpx;
			background-color: #f3f3f3;
			color: rgb(136,136,136);
			font-size: 24rpx;
			border-radius: 100px;
			padding: 4rpx 20rpx;
		}
	}
	
	/deep/.u-textarea {
		background-color: #f3f3f3;
		margin-top: 30rpx;
	}
}
</style>
